<template>
  <div class="wrapper">
    <el-aside class="sider">
      <div class="topslid">常茂生物化学工程股份有限公司</div>
      <el-tree :data="menuList" :props="menuListTreeProps" @node-click="roleNodeClick"></el-tree>
    </el-aside>
    <el-main>
      <el-tree
        :data="dataList"
        show-checkbox
        node-key="id"
        ref="tree"
        :check-strictly="true"
        :default-expanded-keys="expendKey"
        :props="defaultProps"
        @check="clickDeal"
      ></el-tree>
      <div style="padding:20px;">
        <el-button type="primary" @click="saveCheckedNodes">保存</el-button>
      </div>
    </el-main>
  </div>
</template>

<script>
import AddOrUpdate from "./posi-update";
import { treeDataTranslate } from "@/utils";

export default {
  components: { AddOrUpdate },
  data() {
    return {
      departId: "",
      roleId: "",
      addOrUpdateVisible: false,
      dataList: [],
      menuList: [],

      expendKey: [],
      checkdList: [],
      multipleSelection: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      menuListTreeProps: {
        children: "children",
        label: "lable"
      }
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    //获取左边树结构
    getDataList() {
      this.$http({
        url: this.$http.adornUrl("/sys/org/list"),
        method: "POST",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.menuList = data.list;
        this.getanthList();
      });
    },
    // 新增 / 修改
    clickDeal(currentObj, treeStatus) {
      // console.log(currentObj, treeStatus);
      let selected = treeStatus.checkedKeys.indexOf(currentObj.id); // -1未选中
      // 选中
      if (selected !== -1) {
        // 子节点只要被选中父节点就被选中
        this.selectedParent(currentObj);
        // 统一处理子节点为相同的勾选状态
        this.unitechildrename(currentObj, true);
      } else {
        // 未选中 处理子节点全部未选中
        if (currentObj.children && currentObj.children.length !== 0) {
          this.unitechildrename(currentObj, false);
        }
      }
    },
    // 统一处理子节点为相同的勾选状态
    unitechildrename(treeList, isSelected) {
      console.log(treeList);
      this.$refs.tree.setChecked(treeList.id, isSelected);
      if (treeList.children) {
        for (let i = 0; i < treeList.children.length; i++) {
          this.unitechildrename(treeList.children[i], isSelected);
        }
      }
    },
    // 统一处理父节点为选中
    selectedParent(currentObj) {
      let currentNode = this.$refs.tree.getNode(currentObj);

      console.log(currentNode);
      if (currentNode.parent.key !== undefined) {
        this.$refs.tree.setChecked(currentNode.parent, true);
        this.selectedParent(currentNode.parent);
      }
    },
    //左边选择
    roleNodeClick(data) {
      if (data.type == "1") {
        this.roleId = data.value;
        this.departId = data.parentId;
      } else {
        this.roleId = "";
      }
      this.getanthList();
    },
    //获取权限数据
    getanthList() {
      this.$http({
        url: this.$http.adornUrl("/sys/employee/framework"),
        method: "POST",
        params: this.$http.adornParams({
          roleId: this.roleId
        })
      }).then(({ data }) => {
        this.dataList = treeDataTranslate(data.zNodesAuth, "id", "pId");
        let checkdList = data.zNodesAuth.filter(item => item.checked);
        this.expendKey = checkdList.map(item => item.pId);
        this.checkdList = checkdList.map(item => item.id);
        this.$refs.tree.setCheckedKeys(this.checkdList);
      });
    },
    //保存权限数据
    saveCheckedNodes() {
      if (!this.roleId) {
        this.$message.error("请选择人员");
        return false;
      }
      let checkdList = this.$refs.tree.getCheckedNodes().map(item => item.id);

      let defaultListr = this.$refs.tree
        .getHalfCheckedNodes()
        .map(item => item.id);
      checkdList = checkdList.concat(defaultListr);
      // let selectId = this.$refs.tree.getCheckedNodes().map(item => item.id);
      this.$http({
        url: this.$http.adornUrl("/sys/employee/authority/update"),
        method: "POST",
        params: this.$http.adornParams({
          departId: this.departId,
          roleId: this.roleId,
          auths: checkdList.join(",")
        })
      }).then(({ data }) => {
        this.$message({
          message: "操作成功",
          type: "success",
          duration: 1500
        });
      });
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>

<style>
.wrapper {
  display: flex;
  flex: 1;
  margin: -20px;
}
.topOpt {
  background-color: #f2f2f2;
  padding: 10px 20px;
}
.topslid {
  background-color: #1890ff;
  height: 40px;
  padding: 0 10px;
  line-height: 40px;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
}
.sider {
  border-right: 1px solid #cccccc;
  height: 100%;
}
.topBar {
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
}
</style>